<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <caption>商品列表</caption>
    <tr>
        <td>商品名</td>
        <td>价格</td>
        <td>库存</td>
    </tr>
</table>


<script>//----------------------------------------
    let arr = [{title:"小米手机",price:500,num:400},
                {title:"大米手机",price:300,num:490},
                {title:"红米手机",price:100,num:260}];
    //获取table对象
    let table = document.querySelector("table");
    //便利数组
    for (let item of arr){
        let tr = document.createElement("tr");
        let title = document.createElement("td");
        let price = document.createElement("td");
        let num = document.createElement("td");
        //给td添加显示的商品信息
        title.innerText=item.title;
        price.innerText=item.price;
        num.innerText=item.num;
        tr.append(title,price,num);
        table.append(tr);

    }


    //定义一个空的person，不需要提前定义属性-------------------------
    function Person(){

    }
    //实例化person对象
    let p1 = new Person();
    //动态添加属性
    p1.name="大猪头";
    p1.age = 2;
    //动态添加方法
    p1.run = function (){
        console.log(this.name,this.age);
    }
    p1.run();

    //定义一个自带属性和方法的对象-------------------------
    function Car(){
        this.name="大汽车";
        this.price = 5000000;
        this.run=function (){
            console.log(this.name,this.price);
        }
    }
    let car = new Car();
    car.run();
    //直接实例化带属性和方法的对象------------------------------
    let p3 = {
        name:"吕布",
        age:11,
        run:function (){
            console.log(this.name+":"+this.age);
        }
    }
    p3.run();


</script>
</body>
</html>